<template>
  <div class="attention">
    <hm-header>
      <template #center>
        <div>我的关注</div>
      </template>
    </hm-header>
    <hm-attention-item
      v-for="item in attentionList"
      :key="item.id"
      :attentionInfo="item"
      @click="cancelAttention">
      </hm-attention-item>
  </div>
</template>

<script>
import HmAttentionItem from 'components/hm-attention-item'
export default {
  data () {
    return {
      attentionList: []
    }
  },

  components: {
    HmAttentionItem
  },

  created () {
    this.getAttentionList()
  },

  methods: {
    async getAttentionList () {
      const { data: res } = await this.$axios.get('/user_follows')
      if (res.statusCode !== 200) {
        return this.$toast.fail('获取关注列表失败')
      }
      this.attentionList = res.data
    },

    async cancelAttention (id) {
      try {
        await this.$Dialog.confirm({
          title: '提示',
          message: '您确定要取消关注该用户吗？'
        })
      } catch (error) {
        return error
      }
      const { data: res } = await this.$axios.get(`/user_unfollow/${id}`)
      if (res.statusCode !== 200) {
        return this.$toast.fail('取消关注失败')
      }
      this.$toast.success(res.message)
      this.getAttentionList()
    }
  }
}
</script>

<style>

</style>
